import React, { useRef, useState,useEffect } from 'react';
import { Space, Card, Row, Col,Statistic } from 'antd';
import { PageContainer, FooterToolbar } from '@ant-design/pro-layout';
import type { ProColumns, ActionType } from '@ant-design/pro-table';

import { StatisticCard } from '@ant-design/pro-card';
import ProTable from '@ant-design/pro-table';

import { getProductTongji,getProductTongjiHz } from './service'

import type { oilListParams,analysisDataParams } from './data';

import { getSupplierList } from '../../inventory/supplier/service'
import { getProviderList } from '../../inventory/provider/service'

const TableList: React.FC = () => {

  const [selectedRows, setSelectedRows] = useState<oilListParams[]>([]);
  const [analysisData, setAnalysisData] = useState<analysisDataParams>();
  const actionRef = useRef<ActionType>();

  useEffect(()=>{
    const fetch = async ()=>{
      const params = {}
      const res = await getProductTongjiHz(params)
      res.code === 200 && setAnalysisData(res.data.hz)
    }
    fetch();
  },[])

  const oilListColumns: ProColumns[] = [
  
    {
      title: '货品名称',
      dataIndex: 'product_name',
    },
    
    {
      title: '供应商',
      hideInTable: true,
      dataIndex: 'provider_id',
      valueType: 'select',
      fieldProps: ()=>{
        return {
          showSearch: true,
        }
      },
      request: async (params) => {
        const res = await getProviderList({ ...params });
        const data = res.data.list
        return data.map((item) => {
          return {
            label: item.name,
            value: item.id,
          };
        });
      }
    },
    {
      title: '仓库',
      hideInTable: true,
      dataIndex: 'oil_depot_id',
      valueType: 'select',
      fieldProps: ()=>{
        return {
          showSearch: true,
        }
      },
      request: async (params) => {
        const res = await getSupplierList({ ...params });
        const data = res.data.list
        return data.map((item) => {
          return {
            label: item.name,
            value: item.id,
          };
        });
      }
    },
    {
      title: '货品类型',
      hideInSearch: true,
      dataIndex: 'product_type',
    },
    {
      title: '库存总量',
      align: 'right',
      dataIndex: 'all_stock',
      hideInSearch: true,
      sorter: (a, b) => a.all_stock - b.all_stock,
    },
    {
      title: '库存总值',
      align: 'right',
      dataIndex: 'all_stock_price',
      hideInSearch: true,
      // valueType: 'money',
      render: (dom, rowData) => {
        return (
          <Statistic
            precision={3}
            valueStyle={{fontSize:'14px'}}
            value={rowData.all_stock_price}
          />
        )
      },
      sorter: (a, b) => a.all_stock_price - b.all_stock_price,
    },

    {
      title: '剩余库存总量',
      align: 'right',
      dataIndex: 'now_stock',
      hideInSearch: true,
      sorter: (a, b) => a.now_stock - b.now_stock,
    },
    {
      title: '剩余库存总值',
      align: 'right',
      dataIndex: 'now_stock_price',
      hideInSearch: true,
      render: (dom, rowData) => {
        return (
          <Statistic
            precision={3}
            valueStyle={{fontSize:'14px'}}
            value={rowData.now_stock_price}
          />
        )
      },
      sorter: (a, b) => a.now_stock_price - b.now_stock_price,
    },
  ]

  return (
    <PageContainer>
      <Card bordered={false} style={{ marginBottom: '15px' }}>
        <Card.Grid hoverable={false} style={{ width: '40%', padding: '10px', boxShadow: 'none' }}>
          <Row>
            <Col span={10} >
              <StatisticCard
                statistic={{
                  title: '库存总量',
                  valueStyle: {fontWeight: 700},
                  value: analysisData?.all_stock && analysisData.all_stock,
                }}
              />
            </Col>
            <Col span={14}>
              <StatisticCard
                statistic={{
                  valueStyle: {fontWeight: 700},
                  title: '库存总值',
                  precision: 3,
                  value: analysisData?.all_stock_price && analysisData.all_stock_price,
                }}
              />
            </Col>
          </Row>
        </Card.Grid>
      </Card>
      <ProTable<oilListParams>
        headerTitle="货品统计列表"
        loading={false}
        actionRef={actionRef}
        rowKey="product_id"
        bordered={true}
        columns={oilListColumns}
        pagination={{
          pageSize: 10,
          current: 1
        }}
        search={{
          labelWidth: 'auto',
          resetText: '重置查询',
          searchText: '查询统计',
        }}
        rowSelection={{
          onChange: (_, selectedRows) => {
            setSelectedRows(selectedRows);
          },
        }}
        request={async (params) => {
          const dataParams = {
            page: params.current,
            limit: params.pageSize,
            oil_name: params.product_name,
            provider_id: params.provider_id,
            oil_depot_id: params.oil_depot_id,
            bdate: params.bdate,
            edate: params.edate,
          }
          const res = await getProductTongji({ ...dataParams });
          return {
            data: res.data.list,
            success: res.code === 200,
            total: res.data.total,
          };
        }}
      />
      {selectedRows.length > 0 && (
        <FooterToolbar
          extra={
            <Space size="large">
              <div>已选择&nbsp;&nbsp;<a style={{ fontWeight: 600, }}>{selectedRows?.length}</a>&nbsp;&nbsp;项</div>
              <Space>
                库存总量:
                <Statistic
                  valueStyle={{fontSize:'14px',fontWeight: 600,color:'#1890ff'}}
                  value={selectedRows?.reduce((pre, item) => pre + Number(item.all_stock)!, 0)}
                />
              </Space>
              <Space>
              剩余库存总量:
                <Statistic
                  valueStyle={{fontSize:'14px',fontWeight: 600,color:'#1890ff'}}
                  value={selectedRows?.reduce((pre, item) => pre + Number(item.now_stock)!, 0)}
                />
              </Space>
              <Space>
                库存总值:
                <Statistic
                  precision={3}
                  valueStyle={{fontSize:'14px',fontWeight: 600,color:'#1890ff'}}
                  value={selectedRows?.reduce((pre, item) => pre + Number(item.all_stock_price)!, 0)}
                />
              </Space>
              <Space>
              剩余库存总值:
                <Statistic
                  precision={3}
                  valueStyle={{fontSize:'14px',fontWeight: 600,color:'#1890ff'}}
                  value={selectedRows?.reduce((pre, item) => pre + Number(item.now_stock_price)!, 0)}
                />
              </Space>
            </Space>
          }
        >
        </FooterToolbar>
      )}
    </PageContainer>
  );
};

export default TableList;